<template>
  <div id="box">
    <headerBar></headerBar>
    <div class="wraper">
      <div>重置登录密码</div>
      <div class="cellphone">
        <p @click="country_switch">+{{now_country.key}}</p>
        <input type="number" v-model="cell_phone" placeholder="手机号">
      </div>
      <ul class="country_code" v-if="show_country_list">
        <li v-for="item in country_code" @click="change_country(item)">
          <span>+{{item.key}}</span>
          <span>{{item.value}}</span>
        </li>
      </ul>
      <div class="img_code">
        <input type="text" v-model="img_code_text" placeholder="获取图形验证码">
        <div @click="get_img_code"><img :src="img_code.img" alt=""></div>
      </div>
      <div class="text_code">
        <input type="text" v-model="sms_code_message" placeholder="验证码">
        <button @click="sendcode">{{get_text_code}}</button>
      </div>
      <div class="next" @click="next">下一步</div>
    </div>
  </div>
</template>

<script>

  import headerBar from '@/public/header'

  export default {
    components:{
      headerBar
    },
    data () {
      return {
        now_country:{
          key:86,
          value:"中国"
        },
        country_code:null,
        show_country_list:false,
        //图片验证码 图片
        img_code:{
          img:"",
          sequence:null
        },
        //图片验证码 验证码
        img_code_text:"",
        //获取短信验证码
        get_text_code:"获取验证码",
        //短信验证码
        sms_code_message:"",
        //短信验证码序列号
        sms_sequence:null,
        //手机号
        cell_phone:""
      }
    },
    methods:{


      //提示框
      toastNone(msg) {
        this.$dialog.toast({
          mes: msg,
          timeout: 1500
        });
      },


      //显示隐藏国家列表
      country_switch:function () {
        this.show_country_list = !this.show_country_list;
      },


      //更换国家代码
      change_country:function(item){
        this.now_country = item;
        this.show_country_list = false;
      },


      //获取短信验证码
      sendcode:function () {
        let that = this;
        //判断是否输入手机号
        if(!that.cell_phone){
          that.toastNone("手机号不能为空");
          return;
        }
        //判断图片验证码输入是否正确
        that.$http({
          method: 'post',
          url: domain.webUrl + "/exchange/v1/user/sign/captcha",
          data:{
            validate_code: that.img_code_text,
            sequence:that.img_code.sequence,
          }
        }).then((data)=>{
          if(data.data.code === 0){


            //密码重置-获取短信验证码
            that.$http.get( domain.webUrl + '/exchange/v1/message/sms', {
              params : {
                sms_type:"app_reset_login_password",
                is_voice:0,
                country_code:that.now_country.key,
                mobile:that.cell_phone,
                validate_code: that.img_code_text,
                sequence:that.img_code.sequence,
              }
            }).then(function(data){
              if(data.data.code === 0){
                that.sms_sequence = data.data.data.sequence;
                let time = 60;
                let interval = setInterval(function () {
                  time--;
                  that.get_text_code = "重新发送("+ time +")";
                  if(time === 0){
                    clearInterval(interval);
                    that.get_text_code = "获取验证码";
                  }
                },1000);


              } else{
                that.toastNone(data.data.message)
              }
            }).catch(function (error) {
              that.toastNone("获取短信验证码" + "出错")
            });


          } else {
            that.toastNone(data.data.message)
          }
        }).catch(function (error) {
          that.toastNone("获取图片验证码" + "出错");
        });
      },


      //下一步 (重置登录密码短信校验)
      next:function () {
        let that = this;
        that.$http({
          method: 'post',
          url: domain.webUrl + "/exchange/v1/user/sign/app/reset/by/mobile/verify",
          data:{
            validate_code: that.sms_code_message,
            sequence:that.sms_sequence,
            country_code:that.now_country.key,
            mobile:that.cell_phone
          }
        }).then((data)=>{
          if(data.data.code === 0){
            let obj = {
              country_code:that.now_country.key,
              mobile:that.cell_phone,
              operate_token:data.data.data.operate_token
            };

            //把修改密码的参数对象传给下一个页面
            sessionStorage.obj = JSON.stringify(obj);
            that.$router.push({path:'/reset2'})
          } else{
            that.toastNone(data.data.message);
          }
        }).catch((data)=>{
          that.toastNone("重置登录密码短信校验" + "出错");
        })
      },


      //获取图形验证码
      get_img_code:function () {
        let that = this;
        this.$http.get(domain.webUrl + '/exchange/v1/user/sign/captcha')
          .then(function (data) {
            if(data.data.code === 0){
              that.img_code = data.data.data;
              that.img_code.img = "data:image/png;base64," + data.data.data.img;
            } else{
              that.toastNone(data.data.message)
            }
          }).catch(function (error) {
          that.toastNone("获取图片验证码" + "出错")
        });
      }

    },
    created: function () {

      let that = this;

      //获取国家代码列表
      this.$http.get( domain.webUrl + '/exchange/v1/user/sign/country')
        .then(function (data) {
          if(data.data.code === 0){
            that.country_code = data.data.data;
          } else{
            that.toastNone(data.data.message)
          }
        })
        .catch(function (error) {
          that.toastNone("国家代码列表获取"+"出错");
        });

      //获取图片验证码
      that.get_img_code();
    },
  }
</script>

<style lang="less" scoped>
  @import "../style/var.less";
  #box{
    .full;
    position: fixed;
    z-index: 1;
    background: #ffffff;
    .wraper{
      padding: 0 1rem;
      .full;
      .relative;
      div{
        &:nth-child(1){
          margin-top: 1.3rem;
          font-size: 0.58rem;
          color: #636363;
          margin-bottom: 1.1rem;
        }
      }
      .cellphone{
        .flex;
        margin-bottom: 0.5rem;
        align-items: center;
        p{
          width: 1.08rem;
          color: #636363;
        }
        input{
          width: 4.3rem;
          border: none;
          font-size: 0.3rem;
          font-weight: 500;
        }
      }
      .country_code{
        .absolute;
        top: 3.8rem;
        width: 4.5rem;
        height: 5.5rem;
        border: 0.01rem #c1c1c1 solid;
        background: #ffffff;
        padding: 0.2rem 0.1rem 0.1rem 0.3rem;
        overflow: auto;
        li{
          margin-bottom: 0.3rem;
          span:nth-child(1){
            display: inline-block;
            width: 1rem;
          }
        }
      }
      .img_code{
        margin-bottom: 0.4rem;
        .flex;
        input{
          .full-w;
          border: none;
          font-size: 0.3rem;
          font-weight: 500;
        }
        &>div{
          width: 1.82rem;
          height: 0.55rem;
          img{
            .full;
          }
        }
      }
      .text_code{
        margin-bottom: 1.45rem;
        .flex;
        input{
          width: 3.9rem;
          border: none;
          font-size: 0.3rem;
          font-weight: 500;
        }
        &>button{
          width: 1.82rem;
          text-align: center;
          color:#ff9e01;
          font-size: 0.24rem;
          border: none;
        }
      }
      .next{
        font-size: 0.5rem;
        color:#ff9e01;
      }
    }
  }
</style>
